<script setup lang="ts">

import Head from "../components/Head.vue";
import Bottom from "../components/Bottom.vue";
import {fetchHomeData} from "../request/req.ts";
import {onMounted, provide, ref} from "vue";

const main = ref(null)
//获取首页数据
const getHomeData = async () => {
  main.value = await fetchHomeData()
}
onMounted(() => {
  getHomeData()
})

provide('main', main)
</script>

<template>
  <el-container class="page-shell">

    <div class="header-sticky">
      <Head/>
    </div>

    <el-main class="main-fill">
      <router-view/>
    </el-main>


    <div class="footer-fullwidth">
      <Bottom/>
    </div>
  </el-container>
</template>

<style scoped>
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.page-shell {
  background-color: #1a252f;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-fill {
  flex: 1 1 auto;
}

.footer-fullwidth {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
}
</style>
